<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0">
		<title>数据制造</title>
		<style>
            body
            {
                margin: 0;
                background-color: black;
            }
            #color-show
            {
                height: 13vh;
                width: 60vw;
                margin-left: 20vw;
                margin-top: 5vh;
            }
            #data-input
            {
                display: inline-block;
                height: 8vh;
                width: 10vw;
                margin-left: 2vw;
                margin-top: 5vh;
                font-size: 5vh;
                text-align: center;
                color: aqua;
                border-radius: 10vh;
                background-color: rgba(100, 148, 237, .3);
                transition: .8s;
            }
            #data-input:focus
            {
                width: 16vw;
            }
            #select-box
            {
                display: inline-block;
                width: 82vw;
                margin-left: 2vw;
                height: 8vh;
            }
            .color-select
            {
                display: inline-block;
                width: 8vw;
                font-size: 5vh;
                text-align: center;
                padding-top: 1vh;
                height: 8vh;
                border-radius: 10vh;
                background-color: royalblue;
                color: pink;
            }
            #downd
            {
                display: inline-block;
                width: 60vw;
            }
            .line
            {
                display: inline-flex;
                width: 60vw;
                margin-left: 2vw;
                margin-top: 6px;
                background-color: rgba(255, 68, 0, 0.3);
            }
            .uint
            {
                display: inline-block;
                width: 10vw;
                height: 6vh;
                font-size: 3vh;
                margin-left: 1vw;
                text-align: center;
                color: aqua;
                background-color: rgba(255, 68, 0, 0.3);
            }
            #datat
            {
                display: inline-block;
                height: auto;
                float: right;
                margin-top: 20px;
                font-size: 3vh;
                width: 30vw;
                margin-left: 5vw;
                background-color: black;
                color: pink;
                margin-bottom: 60vh;
            }
        </style>
	</head>
	<body>
        <div id="bg">
            <div id="color-show"></div>
            <div style="display: inline-block;">
                <input id="data-input" type="text">
                <div id="select-box">
                    <div class="color-select" onclick="color('白')">白</div>
                    <div class="color-select" onclick="color('灰')">灰</div>
                    <div class="color-select" onclick="color('红')">红</div>
                    <div class="color-select" onclick="color('粉')">粉</div>
                    <div class="color-select" onclick="color('橙')">橙</div>
                    <div class="color-select" onclick="color('黄')">黄</div>
                    <div class="color-select" onclick="color('绿')">绿</div>
                    <div class="color-select" onclick="color('青')">青</div>
                    <div class="color-select" onclick="color('蓝')">蓝</div>
                    <div class="color-select" onclick="color('紫')">紫</div>
                    <div class="color-select" onclick="color('黑')">黑</div>
                </div>
            </div>
            <div style="display: inline-block;">
                <div id="downd">
                    <div class="line">
                        <div class="uint">R</div>
                        <div class="uint">G</div>
                        <div class="uint">B</div>
                        <div class="uint">颜色</div>
                        <div class="uint">结果</div>
                    </div>
                </div>
                <textarea id="datat">csv</textarea>
            </div>
        </div>
		<script>
            document.getElementById("datat").value+="\n";
            color_rgb=new Array(0,0,0);
            function reflesh()
            {
                color_rgb[0]=Math.round(Math.random()*255);
                color_rgb[1]=Math.round(Math.random()*255);
                color_rgb[2]=Math.round(Math.random()*255);
                document.getElementById("color-show").style.backgroundColor="rgb("+color_rgb[0]+","+color_rgb[1]+","+color_rgb[2]+")";
                document.getElementById("data-input").value="";
            }
            function data_make()
            {
                var str=document.getElementById("datat").value;
                str=str.substring(5,str.length);
                var result='<div class="line"><div class="uint">R</div><div class="uint">G</div><div class="uint">B</div><div class="uint">颜色</div><div class="uint">结果</div></div>';
                for(var num=0;num<100;num++)
                {
                    var line_end = str.indexOf("\n");
                    if(line_end>0)
                    {
                        var line=str.substring(0,line_end);
                        var rgb_arr=new Array();
                        for(var num2=0;num2<3;num2++)
                        {
                            var param_end=line.indexOf(",");
                            if(param_end>0)
                            {
                                rgb_arr[num2]=parseInt(line.substring(0,param_end));
                                line=line.substring(param_end+1,line.length);
                            }
                            else
                            {
                                break;
                            }
                        }
                        result+='<div class="line"><div class="uint">'+rgb_arr[0]+'</div><div class="uint">'+rgb_arr[1]+'</div><div class="uint">'+rgb_arr[2]+'</div><div class="uint" style="background-color: rgb('+rgb_arr[0]+','+rgb_arr[1]+','+rgb_arr[2]+')"></div><div class="uint">'+line.substring(0,line.length)+'</div></div>';
                        str=str.substring(line_end+1,str.length);
                    }
                    else
                    {
                        break;
                    }
                }
                document.getElementById("downd").innerHTML=result;
                reflesh();
            }
            document.getElementById("data-input").onkeydown=function(e)
            {
                if(e.keyCode==13)
                {
                    color(document.getElementById("data-input").value[0]);
                }
                return e;
            }
            function color(col)
            {
                document.getElementById("datat").value+=color_rgb[0]+","+color_rgb[1]+","+color_rgb[2]+","+col+"\n";
                data_make();
            }
            reflesh();
        </script>   
    </body>
</html>
